
import React from 'react';
import { Input,Select,Button,Table,Divider } from 'antd';
import { connect } from 'dva';
import styles from './text.less';
const { Search } = Input;
const { Option } = Select;
@connect(({loading,text})=>{
  return{
      ...text,//text是text命名空间的数据，通常是一个对象，...展开对象，返回的对象，这个对象会被 dva 并入到 props 中
      // loading:loading.models.test,
  }
})
  class Text extends React.PureComponent {
	constructor(props) {
		super(props);
    this.state = { selectedRowKeys: [],
                   selectTitle:'',
                   inputTitle:'',
                   cities: this.cityData[this.provinceData[0]],
                   secondCity:this.cityData[this.provinceData[0]][0],
        };
    }
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
      };
    provinceData = ['Zhejiang', 'Jiangsu','rong'];
    cityData = {
      Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
      Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
      rong: ['11Nanjing', '22Suzhou', '33Zhenjiang'],
    };
    columns = [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
      {
        title: 'Action',
        dataIndex: 'action',
        render: () => (
            <span>
            <a>edit</a>
            <Divider type="vertical" />
            <a>Delete</a>
            </span>
        ),
      },
    ];
 
    handleProvinceChange = value => {
      if(value=='Zhejiang'){
        this.setState({
          cities: [],
          secondCity:"",
        });
        return 
      }
      this.setState({
        cities: this.cityData[value],
        secondCity:this.cityData[value][0],
      });
    };
  
    onSecondCityChange = value => {
      this.setState({
        secondCity: value,
      });
    };
    
    render(){
        let {cities}=this.state
        const data = [];
            for (let i = 0; i <21; i++) {
              data.push({
                key: i,
                name: `Edward King ${i}`,
                age: 32,
                address: `London, Park Lane no. ${i}`,
              });
            } 
        const rowSelection = {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
          getCheckboxProps: record => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          }),
      };
        return (<div>
                    <div className={styles.searchtop}>
                        <Search
                            placeholder="input search text"
                            onSearch={value => console.log(value)}
                            style={{ width: 200,marginRight:20, }}
                            />
                        <Select
                            defaultValue={this.provinceData[0]}
                            style={{ width: 120 }}
                            onChange={this.handleProvinceChange}
                          >
                            {this.provinceData.map(province => (
                              <Option key={province}>{province}</Option>
                            ))}
                        </Select>
                        <Select
                          style={{ width: 120 }}
                          value={this.state.secondCity}
                          onChange={this.onSecondCityChange}
                        >
                          {cities.map(city => (
                            <Option key={city}>{city}</Option>
                          ))}
                        </Select>
                    </div>
                    <div className={styles.table}>
                        <h2 style={{padding:'15px', textAlign:"center",backgroundColor:"#ccc",color:"white"}}>{this.props.title}</h2>
                        <Table rowSelection={rowSelection} columns={this.columns} dataSource={data} />
                    </div>
                </div>)
    }
}
export default Text